<template>
  <div class="AllSetting">
     <van-row >
    <van-nav-bar
        class="header"
        :fixed='true'
        title="设置"
      >
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" style="color:white"/>
      </template>
    </van-nav-bar>
     </van-row>

     <van-row class="row_header">
       <van-cell title="使用2G/3G/4G网络播放"  >
       <template #default>
         <van-switch v-model="checked" active-color='#00d069'
          />
       </template>
       </van-cell>
     </van-row>

     <van-row class="row_header">
       <van-cell title="接收消息设置"  >
       <template #default>
         <van-switch v-model="checked2" active-color='#00d069'
          />
       </template>
       </van-cell>
     </van-row>

     <van-row class="row_header">
       <van-cell title="账号和绑定设置"  clickable>
       </van-cell>
     </van-row>

     <van-row class="row_header">
       <van-cell title="清除引用缓存" is-link >
         <template #right-icon>
           <span class="hi">24M</span>
         </template>
       </van-cell>
       <van-cell title="问题反馈" is-link >
         <template #right-icon>
           <van-icon name="arrow" style="color:#000"/>
         </template>
       </van-cell>
       <van-cell title="好评鼓励" is-link >
         <template #right-icon>
           <van-icon name="arrow" style="color:#000"/>
         </template>
       </van-cell>
     </van-row>

    <van-row class="row_header">
       <van-cell title="关于我们" is-link >
         <template #right-icon>
           <van-icon name="arrow" style="color:#000"/>
         </template>
       </van-cell>
       <van-cell title="隐私及协议" is-link >
         <template #right-icon>
           <van-icon name="arrow" style="color:#000"/>
         </template>
       </van-cell>
       <van-cell title="推荐人信息" is-link >
         <template #right-icon>
           <van-icon name="arrow" style="color:#000"/>
         </template>
       </van-cell>
     </van-row>

     <van-row class="row_bottom">
       <van-cell title="退出登录" is-link  @click.native="commit" >
         <template #right-icon>
         </template>
       </van-cell>
     </van-row>

     <van-row class="row_bottom2">
       <van-cell title="注销" is-link @click.native="remove">
         <template #right-icon>
         </template>
       </van-cell>
     </van-row>

  </div>

</template>

<script>
import { Dialog } from 'vant'
export default {
    name: 'AllSetting',
    data () {
        return {
            checked: false,
            checked2: true
        }
    },
    created () {

    },
    mounted () {

    },
    methods: {
        commit() {
            Dialog.confirm({
                title: '退出',
                message: '再留一会嘛',
                width: '300px'

            })
                .then(() => {
                    this.$router.push('/')
                })
                .catch(() => {
                    // on cancel
                });
        },
        remove() {
            Dialog.alert({
                message: '不允许注销',
                width: '300px'

            }).then(() => {
                // on close
            });
        }
    }
}
</script>

<style scoped lang="scss">

/deep/.van-tab{
  width: 300px;
}
/deep/.van-dialog{
  width: 520px!important;
  height: 300px;
}
*{
  padding: 0;
  margin: 0;
}
.AllSetting{
  box-sizing: border-box;
  padding-top: 100px;

}

/deep/ .van-nav-bar__content{
  height: 100px;
  line-height: 100px;
  background-color:#6c6c6c ;
  .font,.van-icon{
    font-size: 36px;
    color: #fff;
  }
  .van-nav-bar__title{
    color: white;
    font-size: 32px;
  }

}

/deep/
.row_header{
  margin-top: 20px;
  .van-cell{
    height: 90px;
    line-height: 90px;

    .van-cell__title{
      text-align: left;
      margin-left: 20px;
      font-size: 32px;
      color: #000;
      // font-weight: 700;
    }
    .van-cell__value{
      box-sizing: border-box;
      // padding-top: 10px;
    }
    .van-switch{
      margin: 28px 30px 0 0 ;
      transform: scale(1.2);
    }
    .hi{
      font-size: 26px;
      margin-right: 15px;
      color: #999;
    }
    .van-icon{
      box-sizing: border-box;
      padding: 23px 0;
      width: 50px;
      font-size: 36px;
    }
    }}

.row_bottom,.row_bottom2{
  margin-top: 120px;
  .van-cell{
  height: 90px;
  line-height: 90px;
  }
  .van-cell__title{
    margin-left: 20px;
    font-size: 32px;
    color: #ff8c63;
    // font-weight: 700;
  }

}
.row_bottom2{
  margin-top: 22px;
  .van-cell__title{
    color: #999;
  }
}

</style>
